<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="components/head :: head(~{:: title}, ~{:: link})">
    <meta charset="UTF-8">
    <title>文章管理</title>
    <link rel="stylesheet" href="/css/wen.css">
</head>
<body>
<!-- Header -->
<header th:replace="_fragments/nav :: navbar"></header>
<!-- End Header -->

<!-- Content -->
<div class="container">
    <div class="alert alert-danger" role="alert"
         th:if="${errInfo != null}" th:text="${errInfo}"></div>

    <!-- Body -->
    <div class="container">
        <h1>Article Manage</h1>
        <h2 style="margin: 40px 0 20px 0;">Search</h2>
        <form>
            <div class="form-group">
                <label for="title">Title</label>
                <input class="form-control" type="text" id="title" name="title" placeholder="title">
            </div>
            <!-- TODO: 这里的类型选择应该用下拉列表，并且给一个TypeID的属性，因为最终传递的是TypeID，手打肯定不方便 -->
            <div class="form-group">
                <label for="type">TypeId</label>
                <input class="form-control" type="text" id="type" name="typeId" placeholder="type">
            </div>
            <input type="hidden" name="page">
            <a onclick="submit()" class="btn btn-default" type="submit">Search</a>
        </form>
        <h2>Result</h2>
        <div id="table_container">
            <table class="table table-striped" th:fragment="articleList">
                <thead>
                <tr>
                    <td>序号</td>
                    <td>id</td>
                    <td>标题</td>
                    <td>最后修改时间</td>
                    <td>类型</td>
                    <td>类型ID</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody>
                <tr th:each="article, iterStat : ${page.content}">
                    <td th:text="${iterStat.count}"></td>
                    <td th:text="${article.id}"></td>
                    <td>
                        <a th:href="@{'/article/' + ${article.id}}" th:text="${article.title}"></a>
                    </td>
                    <td th:text="${article.updateTime}"></td>
                    <td th:text="${article.type.name}"></td>
                    <td th:text="${article.type.id}"></td>
                    <td>
                        <a th:href="@{'/admin/article/edit/' + ${article.id}}" class="btn btn-default">修改</a>
                        <a th:href="@{'/admin/article/delete/' + ${article.id}}" class="btn btn-default">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <nav aria-label="Page navigation" class="col-md-offset-4 col-lg-offset-4col-xl-offset-4">
            <ul class="pagination">
                <li class="disabled" th:if="${page.first == true}">
                <span>
                    <span aria-hidden="true">&laquo;</span>
                </span>
                </li>
                <li th:if="${page.first == false}">
                    <a th:href="@{/admin/article(page=${page.number} - 1)}" aria-label="Next"
                       onclick="page(this)" th:attr="data-page=${page.number - 1}">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>

                <li class="disabled" th:if="${page.last == true}">
                <span>
                    <span aria-hidden="true">&raquo;</span>
                </span>
                </li>
                <li th:if="${page.last == false}">
                    <a th:href="@{/admin/article(page=${page.number} + 1)}" aria-label="Next"
                       onclick="page(this)" th:attr="data-page=${page.number + 1}">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- End Pagination -->

    </div>
    <!-- End Body -->

    <!-- Footer -->
    <div th:replace="components/footer :: footer"></div>
    <!-- End Footer -->

</div>
<!-- End Content -->

<script>
  function page (object) {
    $('[name = "page"]').val($(object).data())
    loadData()
  }

  function loadData () {
    $('#table_container').load(/*[[@{/admin/article/search}]]*/'/admin/article/search', {
      title: $('[name = "title"]').val(),
      typeId: $('[name = "typeId"]').val(),
      page: $('[name = "page"]').val()
    })
  }

  function submit () {
    $('[name="page"]').val(0)
    loadData()
  }
</script>
</body>
</html>
